<template>
    <div class="tableRow">
        <el-row class="select-list" v-permission="'monitor:job:query'">
            <el-form :inline="true" ref="selectForm" :model="selectFormModel" :label-position="'right'"
                     label-width="80px" size="mini">
                <el-form-item label="任务名称" prop="jobName">
                    <el-input v-model="selectFormModel.jobName" placeholder="任务名称" style="width: 200px" clearable
                              @keyup.enter.native="onSearch"/>
                </el-form-item>
                <el-form-item label="任务分组" prop="jobGroup">
                    <el-select value="" v-model="selectFormModel.jobGroup" placeholder="任务分组"
                               @keyup.enter.native="onSearch">
                        <el-option label="默认" value="DEFAULT"/>
                        <el-option label="系统" value="SYSTEM"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务状态" prop="status">
                    <el-select value="" v-model="selectFormModel.status" placeholder="任务状态" style="width: 200px">
                        <el-option label="正常" value="0"/>
                        <el-option label="失败" value="1"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
                    </el-button>
                    <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                               @click="onRefreshSelectForm">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="toolbar">
            <el-button type="danger" icon="el-icon-delete" :disabled="dialog.isBatchRemoveDisabled" size="mini" plain
                       @click="handleBatchDelete" v-permission="'monitor:job:remove'"> 删除
            </el-button>
            <el-button type="danger" icon="fa fa-remove" size="mini" @click="handleClean"
                       v-permission="'monitor:job:remove'"> 清空
            </el-button>
            <el-button type="warning" icon="fa fa-download" size="mini" plain @click="handleExport"
                       v-permission="'monitor:job:export'"> 导出
            </el-button>
        </el-row>
        <data-table ref="dataTable"
                    :api="getJobLogList"
                    :options="options"
                    :columns="columns"
                    :operates="operates"
                    :query="selectFormModel"
                    @handleSelectionChange="handleSelectionChange"
        />
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.dialogVisible"
                   :modal-append-to-body="false"
                   :destroy-on-close="false"
                   width="800px">
            <el-row class="item">
                <el-col :span="12">
                    <el-row>
                        <el-col :span="8">
                            日志序号：
                        </el-col>
                        <el-col :span="16">
                            <span> {{dialog.row.id}}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="8">
                            任务分组：
                        </el-col>
                        <el-col :span="16">
                            <span v-if="dialog.row.jobGroup==='DEFAULT'"> 默认 </span>
                            <span v-else-if="dialog.row.jobGroup==='SYSTEM'"> 系统 </span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="item">
                <el-col :span="12">
                    <el-row>
                        <el-col :span="8">
                            任务名称：
                        </el-col>
                        <el-col :span="16">
                            <span> {{dialog.row.jobName}}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="8">
                            执行时间：
                        </el-col>
                        <el-col :span="16">
                            <span> {{dialog.row.createTime}}</span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="item">
                <el-col :span="4">
                    调用方法：
                </el-col>
                <el-col :span="20">
                    <span> {{dialog.row.invokeTarget}}</span>
                </el-col>
            </el-row>
            <el-row class="item">
                <el-col :span="4">
                    日志信息：
                </el-col>
                <el-col :span="20">
                    <span> {{dialog.row.jobMessage}}</span>
                </el-col>
            </el-row>
            <el-row class="item">
                <el-col :span="4">
                    执行状态：
                </el-col>
                <el-col :span="20">
                    <span v-if="dialog.row.status==='0'"> 成功 </span>
                    <span v-else-if="dialog.row.status==='1'"> 失败 </span>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.dialogVisible  = false" size="medium">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {Component, Ref, Vue} from "vue-property-decorator";
    import DataTable from "@/components/DataTable/DataTable.vue";
    import {cleanJobLogs, exportJobLog, getJobLogList, removeJobLog} from '@/api/joblog';

    @Component({
        components: {
            DataTable
        }
    })
    export default class JobLog extends Vue {
        @Ref("dataTable") private dataTable: any;
        @Ref("selectForm") private selectForm: any;
        private getJobLogList: Function = getJobLogList;

        selectFormModel: any = {
            jobName: "",
            jobGroup: "",
            status: "",
        };
        /*table 的参数*/
        options: any = {
            stripe: true, // 是否为斑马纹 table
            loading: false, // 是否添加表格loading加载动画
            highlightCurrentRow: true, // 是否支持当前行高亮显示
            multipleSelect: true, // 是否支持列表项选中功能
        };
        dialog: any = {
            dialogVisible: false,
            title: "对话框",
            isBatchEditDisabled: true,
            isBatchRemoveDisabled: true,
            formData: [],
            row: {}
        };

        columns: any = [
            {label: "日志编号", prop: "id", sortable: "custom"},
            {label: "任务名称", prop: "jobName", sortable: "custom"},
            {
                label: "任务分组", prop: "jobGroup", sortable: "custom", width: 100, render: function (createElement, row) {
                    if (row && row.row && row.row.jobGroup === "DEFAULT") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "success"
                                }
                            }, ["默认"]
                        );
                    } else if (row && row.row && row.row.jobGroup === "SYSTEM") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "warning"
                                }
                            }, ["系统"]
                        );
                    } else {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "danger"
                                }
                            }, ["未知"]
                        );
                    }
                }
            },
            {label: "调用目标字符串", prop: "invokeTarget", sortable: "custom", width: 400, showOverflowTooltip: true},
            {label: "日志信息", prop: "jobMessage", sortable: "custom", width: 250},
            {
                label: "执行状态", prop: "status", sortable: "custom", render: function (createElement, row) {
                    if (row && row.row && row.row.status === "0") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "success"
                                }
                            }, ["成功"]
                        );
                    } else if (row && row.row && row.row.status === "1") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "danger"
                                }
                            }, ["失败"]
                        );
                    } else {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "warning"
                                }
                            }, ["未知"]
                        );
                    }
                }
            },
            {label: "执行时间", prop: "createTime", sortable: "custom", width: 160}
        ];

        /*操作栏*/
        operates: any = {
            width: "auto",
            fixed: "right",
            list: [
                {
                    label: "删除",
                    type: "danger",
                    icon: "el-icon-delete",
                    plain: true,
                    disabled: (index, row) => {
                        return false;
                    },
                    permission: "monitor:job:remove",
                    method: (index, row) => {
                        this.handleDelete(index, row);
                    }
                },
                {
                    label: "详细",
                    type: "info",
                    icon: "el-icon-info",
                    plain: true,
                    disabled: (index, row) => {
                        return false;
                    },
                    permission: "monitor:job:detail",
                    method: (index, row) => {
                        this.handleLogInfo(index, row);
                    }
                }
            ]
        };

        /*删除*/
        handleDelete(index: number, row: any) {
            this.$confirm("确定要删除该任务日志吗？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                return removeJobLog({"ids": [row.id]});
            }).then((response: any) => {
                this.dataTable.refresh();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        /*批量删除*/
        handleBatchDelete() {
            //删除
            this.$confirm("确定要删除选定任务日志吗？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let ids: Array<any> = [];
                this.dialog.formData.forEach((item, index) => {
                    ids[index] = item.id;
                });
                return removeJobLog({"ids": ids});
            }).then((response: any) => {
                this.dataTable.refresh();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        /*清空*/
        handleClean(): void {
            let self = this;
            self.$confirm("确定要清空所有调度日志吗？【此操作不可逆】", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error"
            }).then(() => {
                return cleanJobLogs();
            }).then((response: any) => {
                self.dataTable.refresh();
                self.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        /*导出excel*/
        handleExport(): void {
            let self = this;
            self.$confirm("确定要当前查询的所有任务调度操作日志吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
            }).then(() => {
                self.selectFormModel.pageNum = null;
                self.selectFormModel.pageSize = null;
                self.selectFormModel.orderByColumn = "id";
                self.selectFormModel.isAsc = "asc";

                return exportJobLog(self.selectFormModel);
            }).then((response: any) => {
                console.log(response);
                if (response && response.data) {
                    (self as any).$download(response.data.fileName);
                }
            }).catch((e) => {
                console.log(e);
            });
        }

        /*选中事件*/
        handleSelectionChange(val): void {
            if (val) {
                this.dialog.isBatchRemoveDisabled = val.length <= 0;
                this.dialog.isBatchEditDisabled = val.length !== 1;
            }
            this.dialog.formData = val;
        }

        /*日志详情*/
        handleLogInfo(index: number, row: any) {
            this.dialog.dialogVisible = true;
            this.dialog.row = row;
            this.dialog.title = '任务日志详细';
        }

        /*搜索*/
        onSearch(): void {
            this.dataTable.refresh();
        }

        /*重置*/
        onRefreshSelectForm(): void {
            //恢复搜索默认信息
            this.selectForm.resetFields();
            this.onSearch();
        }
    }
</script>

<style scoped lang="scss">
    .tableRow {
        .el-dialog__body {
            .item {
                margin-bottom: 18px;
            }
        }
    }
</style>

